<template>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 高级模板 -->
        <el-tab-pane label="高级模板" name="second">
          <div class="common-form">视频基本配置：</div>
          <div class="xian"></div>
          <el-form ref="form" :model="form" label-width="150px" :rules="rules">
            <el-form-item label="选择活动" prop="action_id">
              <el-select v-model="form.action_id" placeholder="请选择" filterable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
  
            <el-form-item label="视频名称" prop="video_name">
              <el-input
                v-model="form.video_name"
                placeholder="填写视频名称"
              ></el-input>
            </el-form-item>
            <div class="common-form">模板列表：</div>
            <div class="xian"></div>
            <div style="width: 100%; display: flex; flex-direction: column">
              <el-form-item label="选择模板分类">
                <el-select
                  v-model="form.senior_tmp_temp"
                  placeholder="请选择"
                  style="margin-right: 200px; margin-bottom: 10px; width: 300px"
                  @change="changeFirstLevel($event)"
                  filterable
                >
                  <el-option
                    v-for="item in firstLevelListData"
                    :key="item.group_id"
                    v-if="item.is_has_audio === 0"
                    :label="item.label"
                    :value="item.group_id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择模板" v-if="form.senior_tmp_temp">
                <el-select
                  v-model="form.senior_tmp"
                  placeholder="请选择"
                  style="margin-right: 200px; margin-bottom: 10px; width: 300px"
                  @change="getchange($event)"
                >
                  <el-option
                    v-for="item in listData"
                    :key="item.tem_ids"
                    :label="item.tem_name"
                    :value="item.tem_name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="视频效果" v-if="video_src">
                <video
                  :src="video_src"
                  controls="controls"
                  :autoplay="true"
                  :muted="true"
                  style="
                                            width: 30%;
                                            height: 200px;
                                            outline: none;
                                            margin-right: 100px;
                                          "
                ></video>
              </el-form-item>
            </div>
  
            <!-- 普通模板 -->
  
            <template v-if="imgVideoListArr.length > 0 && form.type === 1">
              <div class="common-form">
                需要上传的素材：注意：每个位置都不能为空：
              </div>
              <div class="xian"></div>
              <div
                class="lin"
                v-for="(item, index) in imgVideoListArr"
                :key="item.sort"
              >
                <el-form-item :label="`图片/视频 - ${index + 1}`" prop="image">
                  <el-button
                    size="small"
                    type="primary"
                    @click="handleFileManager(index)"
                    >文件管理器
                  </el-button>
                  <ul class="img-video-list" v-if="fileList[0][index]">
                    <li v-for="(img, idx) in fileList[0][index]" :key="idx">
                      <img
                        :src="img.file_path"
                        alt=""
                        v-if="
                          img.type === 'png' ||
                            img.type === 'jpg' ||
                            img.type === 'jpeg' ||
                            img.type === 'webp'
                        "
                      />
                      <div
                        class="img-video-list-item-default"
                        v-else-if="img.type === 'mp4'"
                      >
                        <img
                          :src="
                            img.file_path +
                              '?x-oss-process=video/snapshot,t_0,f_jpg'
                          "
                          alt="暂无封面"
                        />
                        <div>{{ img.type }}</div>
                      </div>
                      <div class="img-video-list-item-default" v-else>
                        <img
                          src="/static/imgs/default.png"
                          alt="暂无封面"
                        />
                        <p>{{ img.type }}</p>
                      </div>
                      <span
                        class="img-video-list-item-delete"
                        @click="handleImgVideoListItemRemove(img, idx, index)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </li>
                  </ul>
                </el-form-item>
                <el-form-item :label="`配文 - ${index + 1}`" prop="content">
                  <el-input
                    v-for="(text, textIdx) in item.text"
                    style="margin: 5px 0"
                    :key="item.sort + text.sort"
                    v-model="imgVideoListArr[index].text[textIdx].word"
                    :placeholder="`替换模板视频的文字 ${textIdx + 1}`"
                  ></el-input>
                </el-form-item>
                <div class="xian"></div>
              </div>
            </template>
  
            <!-- 高级模板 -->
  
            <template v-if="form.type === 2">
              <div>
                <div class="common-form">
                  需要上传图片/视频：注意：每个位置都不能为空：
                </div>
                <div class="xian"></div>
                <div
                  class="lin"
                  v-for="(item, key, index) in video_tem_params.mediaList"
                  :key="index"
                >
                  <el-form-item :label="'图片/视频' + key" prop="image">
                    <el-button
                      size="small"
                      type="primary"
                      @click="handleFileManager(index)"
                      >文件管理器
                    </el-button>
                    <ul class="img-video-list" v-if="fileList[0][index]">
                      <li v-for="(img, idx) in fileList[0][index]" :key="idx">
                        <img
                          :src="img.file_path"
                          alt=""
                          v-if="
                            img.type === 'png' ||
                              img.type === 'jpg' ||
                              img.type === 'jpeg' ||
                              img.type === 'webp'
                          "
                        />
                        <div
                          class="img-video-list-item-default"
                          v-else-if="img.type === 'mp4'"
                        >
                          <img
                            :src="
                              img.file_path +
                                '?x-oss-process=video/snapshot,t_0,f_jpg'
                            "
                            alt="暂无封面"
                          />
                          <div>{{ img.type }}</div>
                        </div>
                        <div class="img-video-list-item-default" v-else>
                          <img
                            src="/static/imgs/default.png"
                            alt="暂无封面"
                          />
                          <p>{{ img.type }}</p>
                        </div>
                        <span
                          class="img-video-list-item-delete"
                          @click="handleImgVideoListItemRemove(img, idx, index)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </li>
                    </ul>
                  </el-form-item>
                </div>
  
                <div class="common-form">
                  需要上传配文：注意：每个位置都不能为空：
                </div>
                <div class="xian"></div>
                <div
                  class="lin"
                  v-for="(item, key, index) in video_tem_params.textList"
                  :key="key"
                >
                  <el-form-item :label="`配文 - ${key}`" prop="content">
                    <el-input
                      style="margin: 5px 0"
                      v-model="video_tem_params.textList[key]"
                      :placeholder="`替换模板视频的文字 ${key}`"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </template>
            <div class="common-form">视频生成配置参数</div>
            <div class="xian"></div>
            <el-form-item label="最多合成视频的数量" prop="region">
              <el-input v-model="form.max_num" placeholder="例：1000"></el-input>
            </el-form-item>
            <div class="common-form">总结</div>
            <div class="xian"></div>
            <div class="som">
              <el-form-item>
                <el-button style="" type="primary" @click="onSubmit">
                  提交
                </el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="音频模板" name="name">
          <div class="common-form">视频基本配置：</div>
          <div class="xian"></div>
          <el-form ref="form" :model="form" label-width="150px" :rules="rules">
            <el-form-item label="选择活动" prop="action_id">
              <el-select v-model="form.action_id" placeholder="请选择" filterable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="视频名称" prop="video_name">
              <el-input
                v-model="form.video_name"
                placeholder="填写视频名称"
              ></el-input>
            </el-form-item>
            <div class="common-form">模板列表：</div>
            <div class="xian"></div>
            <div style="width: 100%; display: flex; flex-direction: column">
              <el-form-item label="选择模板分类">
                <el-select
                  v-model="form.senior_tmp_temp"
                  placeholder="请选择"
                  style="margin-right: 200px; margin-bottom: 10px; width: 300px"
                  @change="changeFirstLevel($event)"
                  filterable
                >
                  <el-option
                    v-for="item in firstLevelListData"
                    :key="item.group_id"
                    :label="item.label"
                    v-if="item.is_has_audio === 1"
                    :value="item.group_id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="选择模板" v-if="form.senior_tmp_temp">
                <el-select
                  v-model="form.senior_tmp"
                  placeholder="请选择"
                  style="margin-right: 200px; margin-bottom: 10px; width: 300px"
                  @change="getchangeand($event)"
                >
                  <el-option
                    v-for="item in listData"
                    :key="item.tem_ids"
                    :label="item.tem_name"
                    :value="item.tem_name"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="视频效果" v-if="video_src">
                <video
                  :src="video_src"
                  controls="controls"
                  :autoplay="true"
                  :muted="true"
                  style="
                                            width: 30%;
                                            height: 200px;
                                            outline: none;
                                            margin-right: 100px;"
                ></video>
              </el-form-item>
            </div>
            <!-- 普通模板 -->
            <template v-if="imgVideoListArr.length > 0 && form.type === 1">
              <div class="common-form">
                需要上传的素材：注意：每个位置都不能为空：
              </div>
              <div class="xian"></div>
              <div
                class="lin"
                v-for="(item, index) in imgVideoListArr"
                :key="item.sort"
              >
                <el-form-item :label="`图片/视频 - ${index + 1}`" prop="image">
                  <el-button
                    size="small"
                    type="primary"
                    @click="handleFileManager(index, 'media')"
                  >文件管理器
                  </el-button>
                  <ul class="img-video-list" v-if="fileList[0][index]">
                    <li v-for="(img, idx) in fileList[0][index]" :key="idx">
                      <img
                        :src="img.file_path"
                        alt=""
                        v-if="
                          img.type === 'png' ||
                            img.type === 'jpg' ||
                            img.type === 'jpeg' ||
                            img.type === 'webp'
                        "
                      />
                      <div
                        class="img-video-list-item-default"
                        v-else-if="img.type === 'mp4'"
                      >
                        <img
                          :src="
                            img.file_path +
                              '?x-oss-process=video/snapshot,t_0,f_jpg'
                          "
                          alt="暂无封面"
                        />
                        <div>{{ img.type }}</div>
                      </div>
                      <div class="img-video-list-item-default" v-else>
                        <img
                          src="/static/imgs/default.png"
                          alt="暂无封面"
                        />
                        <p>{{ img.type }}</p>
                      </div>
                      <span
                        class="img-video-list-item-delete"
                        @click="handleImgVideoListItemRemove(img, idx, index)"
                      >
                        <i class="el-icon-delete"></i>
                      </span>
                    </li>
                  </ul>
                </el-form-item>
                <el-form-item :label="`配文 - ${index + 1}`" prop="content">
                  <el-input
                    v-for="(text, textIdx) in item.text"
                    style="margin: 5px 0"
                    :key="item.sort + text.sort"
                    v-model="imgVideoListArr[index].text[textIdx].word"
                    :placeholder="`替换模板视频的文字 ${textIdx + 1}`"
                  ></el-input>
                </el-form-item>
                <div class="xian"></div>
              </div>
            </template>
            <!-- 高级模板 -->
            <template v-if="form.type === 3">
              <div>
                <div class="common-form">
                  需要上传图片/视频：注意：每个位置都不能为空：
                </div>
                <div class="xian"></div>
                <div
                  class="lin"
                  v-for="(item, key, index) in video_tem_params.mediaList"
                  :key="index"
                >
                  <el-form-item :label="'图片/视频' + key" prop="image">
                    <el-button
                      size="small"
                      type="primary"
                      @click="handleFileManager(index, 'media')"
                    >文件管理器
                    </el-button>
                    <ul class="img-video-list" v-if="fileList[0][index]">
                      <li v-for="(img, idx) in fileList[0][index]" :key="idx">
                        <img
                          :src="img.file_path"
                          alt=""
                          v-if="
                            img.type === 'png' ||
                              img.type === 'jpg' ||
                              img.type === 'jpeg' ||
                              img.type === 'webp'
                          "
                        />
                        <div
                          class="img-video-list-item-default"
                          v-else-if="img.type === 'mp4'"
                        >
                          <img
                            :src="
                              img.file_path +
                                '?x-oss-process=video/snapshot,t_0,f_jpg'
                            "
                            alt="暂无封面"
                          />
                          <div>{{ img.type }}</div>
                        </div>
                        <div class="img-video-list-item-default" v-else>
                          <img
                            src="/static/imgs/default.png"
                            alt="暂无封面"
                          />
                          <p>{{ img.type }}</p>
                        </div>
                        <span
                          class="img-video-list-item-delete"
                          @click="
                            handleImgVideoListItemRemove(img, idx, index, 'image')
                          "
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </li>
                    </ul>
                  </el-form-item>
                </div>
  
                <div class="common-form">
                  需要上传配文：注意：每个位置都不能为空：
                </div>
                <div class="xian"></div>
                <div
                  class="lin"
                  v-for="(item, key, index) in video_tem_params.textList"
                  :key="key"
                >
                  <el-form-item :label="`配文 - ${key}`" prop="content">
                    <el-input
                      style="margin: 5px 0"
                      v-model="video_tem_params.textList[key]"
                      :placeholder="`替换模板视频的文字 ${key}`"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </template>
            <div class="common-form">选择背景音乐素材：</div>
            <div class="xian"></div>
            <el-form-item label="是否带音频:" :label-width="formLabelWidth">
              <template>
                <el-radio v-model="form.is_check_audio" :label="1">是</el-radio>
                <el-radio v-model="form.is_check_audio" :label="0">否</el-radio>
              </template>
            </el-form-item>
            <!-- index -->
            <div
              class="lin"
              v-for="(item, key, index) in video_tem_params.audioList"
              :key="key"
            >
              <el-form-item :label="`音频 - ${key}`" prop="audio">
                <el-button
                  size="small"
                  type="primary"
                  @click="handleFileManager(index, 'audio')"
                >文件管理器
                </el-button>
                <ul class="img-video-list" v-if="fileList[1][index]">
                  <li v-for="(img, idx) in fileList[1][index]" :key="idx">
                    <img
                      :src="img.file_path"
                      alt=""
                      v-if="
                        img.type === 'png' ||
                          img.type === 'jpg' ||
                          img.type === 'jpeg' ||
                          img.type === 'webp'
                      "
                    />
                    <div class="img-video-list-item-default" v-else>
                      <img
                        src="/static/imgs/default.png"
                        alt="暂无封面"
                      />
                      <p>{{ img.type }}</p>
                    </div>
                    <span
                      class="img-video-list-item-delete"
                      @click="
                        handleImgVideoListItemRemove(img, idx, index, 'audio')
                      "
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </li>
                </ul>
              </el-form-item>
            </div>
            <div class="common-form">视频生成配置参数</div>
            <div class="xian"></div>
            <el-form-item label="最多合成视频的数量" prop="region">
              <el-input v-model="form.max_num" placeholder="例：1000"></el-input>
            </el-form-item>
            <div class="common-form">总结</div>
            <div class="xian"></div>
            <div class="som">
              <el-form-item>
                <el-button style="" type="primary" @click="onSubmitget">
                  提交
                </el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="手动上传" name="first">
          <div class="common-form">手动上传：</div>
          <el-form :model="form">
            <el-form-item label="视频名称:" :label-width="formLabelWidth">
              <el-input v-model="form.video_name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="选择活动"
              prop="video_name"
              :label-width="formLabelWidth"
            >
              <el-select v-model="form.action_id" placeholder="请选择" filterable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
  
            <el-form-item label="视频地址:" :label-width="formLabelWidth">
              <div style="display: flex; flex-wrap: wrap;">
                <div
                  v-for="(url, ind) in form.video"
                  :key="ind"
                  class="video-item"
                >
                  <img
                    style="height: 100px;width: 100px;margin: 10px;"
                    :src="url + '?x-oss-process=video/snapshot,t_0,f_jpg'"
                  />
                  <span
                    class="img-video-list-item-delete"
                    @click="videoListItemRemove(ind)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </div>
              </div>
              <el-upload
                class="avatar-uploader"
                multiple
                ref="upload"
                action="string"
                :accept="accept"
                :before-upload="onBeforeUploadImage"
                :http-request="UploadImage1"
                :show-file-list="false"
                :on-change="fileChange"
              >
                <!-- <video v-if="form.video[0] != ''" :src="form.video[0]" class="video-avatar" controls="controls"
                  autoplay="autoplay">
                  您的浏览器不支持视频播放
                </video> -->
  
                <el-button size="small" icon="el-icon-upload" type="primary"
                  >点击上传
                </el-button>
              </el-upload>
            </el-form-item>
  
  
            <el-form-item label="选择按钮:" :label-width="formLabelWidth">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="ensure_one()">确 定</el-button>
            </el-form-item>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form>
        </el-tab-pane>
  
        <!-- 音频模板 -->
  
  
      </el-tabs>
  
      <!-- 文件选择器 -->
      <uploader
        v-if="isOpenFileManager"
        :isupload="isOpenFileManager"
        :active="activeFiles"
        @returnImgs="returnImgsFunc"
      >
      </uploader>
    </div>
  </template>
  <script>
  let id = 0;
  // import FileApi from '@/api/file.js'
  //引入Vue.config.js文件
  // import  API_CONFIG from "../../../../index.js"
  // import axios from "axios";
  // import Upload from "../../components/file/Upload.vue";
  // import FileApi from "@/api/file.js";
  // import request from "@/utils/request";
  // import Uploader from "../../components/file/Uploader.vue";
  
  export default {
    components: {
      Uploader
    },
    data() {
      return {
        activeName: "second",
        accept: "",
        dialogImageUrl: "",
        dialogVisible: false,
        formLabelWidth: "120px",
        dialogFormVisible: false,
        video_src: "",
        listData: [],
        listpage: {
          page: 1,
          per_page: 100,
          action_name: "",
          start: "",
          end: ""
        },
  
        /*默认值*/
        this_config: {
          /*上传个数*/
          total: 1,
          file_type: "image"
        },
        // 是否上传图片
        isOpenFileManager: false,
        valuess: "",
        options: [],
        form: {
          is_check_audio: 1,
          // 活动ID
          action_id: "",
          // 视频名称
          video_name: "",
          // 视频封面
          // video_cover: "",
          // 模板类型
          type: 1, // 1 普通模板 , 2 高级模板
          // 高级模板一级分类
          senior_tmp_temp: "",
          // 高级模板二级分类
          senior_tmp: "",
          // 高级模板主键 id
          temid: "",
          // 高级模板 id
          tem_ids: "",
          // 模板效果(0)
          // tmp_effect:
          //   "https://ice-public-media.oss-cn-shanghai.aliyuncs.com/ice-document-media/ve_template/IceSys_VETemplate_s102096.mp4",
          tmp_effect: [],
          // 合成视频数量
          max_num: 1,
          // 图片与配文
          detail: [],
          video: [],
          num: ""
        },
        rules: {
          name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
          video_name: [
            { required: true, message: "请输入视频名称", trigger: "blur" }
          ],
          action_id: [
            { required: true, message: "请选择活动", trigger: "blur" }
          ]
        },
        // 当前打开的文件管理器索引
        fileManagerIndex: 0,
        // 当前打开的文件管理器类型
        fileManagerType: "media",
        // 图片/视频的文件临时存储位置, 应为二维数组
        fileList: [],
        // 文字临时存储位置, 应为二维数组
        fileText: [],
        // 视频模板 , 需要根据该模板渲染文件选择器和文字
        video_tem_params: {},
        // 视频模板
        imgVideoListArr: [],
        // 一级分类
        firstLevelListData: [],
        activeFiles: []
      };
    },
    created() {
      // 获取活动列表
      this.getdatainfo();
    },
    mounted() {
      this.getListFirstLevel();
    },
    methods: {
      videoListItemRemove(i) {
        this.form.video.splice(i, 1);
        this.$forceUpdate();
      },
      handleClick(tab, event) {
  
        this.form.senior_tmp_temp='';
        this.form.senior_tmp = '';
        this.video_src='';
        this.video_tem_params = {};
        this.imgVideoListArr = [];
        this.form.type=1;
        this.form.video_name = "";
        this.form.action_id='';
  
      },
      UploadImage1(param) {
        let self = this;
        const loading = this.$loading({
          lock: true,
          text: "图片上传中,请等待",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        const formData = new FormData();
        formData.append("iFile", param.file);
        formData.append("group_id", self.activeType);
        formData.append("file_type", self.this_config.file_type);
        FileApi.uploadFile(formData).then(res => {
          // res.data;
          this.form.tem_video = res.data;
          loading.close();
          param.onSuccess();
          this.form.video.push(res.data.file_path);
          this.$forceUpdate();
        });
      },
      // 添加
      async ensure_one() {
        var res = await request._post("/shop/video.tmp/addManual", {
          video_name: this.form.video_name,
          action_id: this.form.action_id,
          video: this.form.video,
          num: this.form.num
        });
        this.dialogFormVisible = false;
        console.log(res);
        if (res.code == 1) {
          this.$message({
            message: res.msg,
            type: "success"
          });
          this.form.video = [];
          this.$forceUpdate();
        } else {
          this.$message({
            message: res.msg,
            type: "warning"
          });
        }
        // this.getList();
      },
      //添加
      addmodel() {
        this.add = true;
        this.dialogFormVisible = true;
      },
      // 图片/视频 文件管理器方法
      returnImgsFunc(e) {
        if (!e) {
          this.isOpenFileManager = false;
          return;
        }
        // 上传音频素材
        if (this.fileManagerType == "audio") {
          this.isOpenFileManager = false;
          let fileListTemp = [];
          e.forEach(item => {
            fileListTemp.push({
              ...item,
              type: this.getExtension(item.file_path)
            });
          });
          console.log("音频序号", this.fileManagerIndex);
          if (Array.isArray(this.fileList[1][this.fileManagerIndex])) {
            this.fileList[1][this.fileManagerIndex].push(...fileListTemp);
          } else {
            this.fileList[1][this.fileManagerIndex] = fileListTemp;
          }
        } else if (e[0].file_path.indexOf("MP3") != -1) {
          this.isOpenFileManager = false;
          console.log("111111111111111111");
          for (let i = 0; i < e.length; i++) {
            if (e[i].file_path.indexOf("MP3") != -1) {
              this.form.tmp_effect.push(e[i].file_path);
            }
          }
          // this.form.tmp_effect = e[0].file_path;
          // console.log("1111111111111111", this.form.tmp_effect);
          return;
        } else {
          // console.log("22222222222222222");
          // console.log("获取图片1", e);
          this.isOpenFileManager = false;
          let fileListTemp = [];
          e.forEach(item => {
            fileListTemp.push({
              ...item,
              type: this.getExtension(item.file_path)
            });
          });
          // console.log('454545454545454545', this.fileManagerIndex);
          this.fileList[0][this.fileManagerIndex] = fileListTemp;
          // this.fileList.push(fileListTemp);
  
          // console.log("上传素材", this.fileList)
        }
      },
      // 获取后缀名
      getExtension(name) {
        return name.substring(name.lastIndexOf(".") + 1);
      },
      // 删除一条数据
      handleImgVideoListItemRemove(file, idx, index, type) {
        if (type == "audio") {
          this.fileList[1][index].splice(idx, 1);
        } else {
          this.fileList[0][index].splice(idx, 1);
        }
  
        this.$forceUpdate();
      },
      // 模板列表 - 选择模板 - 一级分类
      async getListFirstLevel() {
        const res = await request._post("/shop/video.TemGroup/selTemGroup");
        // list
        this.firstLevelListData = res.data.list.data;
        console.log("模板列表 - 选择模板 - 一级分类", res.data.list.data);
      },
      // 模板列表 - 选择模板 - 一级分类 - 更改事件
      changeFirstLevel(e) {
        this.listData = [];
        this.form.senior_tmp = "";
        this.video_src = "";
        this.getListSecondLevel(e);
      },
      //模板列表 - 选择模板 - 二级分类
      async getListSecondLevel(id) {
        console.log(id);
        const res = await request._post("/shop/video.TemUpload/selvideo", {
          group_id: id
        });
        this.listData = res.data.list.data;
      },
      // 模板列表 - 选择模板 - 二级分类 - 更改事件
      async getchange(value) {
        this.listData.forEach(item => {
          console.log(item);
          if (item.tem_name === value) {
            this.video_src = item.tem_video;
            this.form.tem_ids = item.tem_ids; // 高级模板 id
            this.form.temid = item.temid; // 高级模板主键 id
            this.form.type = item.type; // 判断类型
            if (item.type === 1) {
              this.imgVideoListArr = item.arr;
              // 创建图片二维数组
              this.fileList = [new Array(item.arr.length)];
              console.log(this.imgVideoListArr);
            } else if (item.type === 2) {
              let obj = JSON.parse(item.tem_parame);
              let formatObj = {
                mediaList: {},
                textList: {},
                audioList: {}
              };
              for (let itemObj in obj) {
                if (itemObj.match("Media")) {
                  formatObj.mediaList[itemObj] = [];
                } else if (itemObj.match("Text")) {
                  formatObj.textList[itemObj] = "";
                } else if (itemObj.match("audio")) {
                  formatObj.audioList[itemObj] = [];
                }
              }
              this.video_tem_params = formatObj;
              console.log(this.video_tem_params, "------------");
              this.fileList = [
                new Array(formatObj.mediaList.length),
                new Array(formatObj.audioList.length)
              ];
            }
          }
        });
      },
      // 音频列表
      async getchangeand(value) {
        this.listData.forEach(item => {
          console.log(item);
          if (item.tem_name === value) {
            this.video_src = item.tem_video;
            this.form.tem_ids = item.tem_ids; // 高级模板 id
            this.form.temid = item.temid; // 高级模板主键 id
            this.form.type = item.type; // 判断类型
            if (item.type === 1) {
              this.imgVideoListArr = item.arr;
              // 创建图片二维数组
              this.fileList = [new Array(item.arr.length)];
              console.log(this.imgVideoListArr);
            } else if (item.type === 3) {
              let obj = JSON.parse(item.tem_parame);
              let formatObj = {
                mediaList: {},
                textList: {},
                audioList: {}
              };
              for (let itemObj in obj) {
                if (itemObj.match("Media")) {
                  formatObj.mediaList[itemObj] = [];
                } else if (itemObj.match("Text")) {
                  formatObj.textList[itemObj] = "";
                } else if (itemObj.match("audio")) {
                  formatObj.audioList[itemObj] = [];
                }
              }
              this.video_tem_params = formatObj;
              console.log(this.video_tem_params, "------------");
              this.fileList = [
                new Array(formatObj.mediaList.length),
                new Array(formatObj.audioList.length)
              ];
            }
          }
        });
      },
      // 获取活动列表
      async getdatainfo() {
        let res = await request._post("/shop/video.action/index", this.listpage);
        if (res.code == 1) {
          res.data.data.forEach((item, i) => {
            let arr = {};
            arr.label = item.action_name;
            arr.value = item.id;
            this.options.push(arr);
          });
  
          console.log("获取活动列表成功", res);
        }
      },
      getdata() {
        const datalist = request._post("/shop/video.tmp/add", this.form);
        console.log("获取视频模板列表", res);
      },
      //上传图片1
      handleFileManager(index, type = "media") {
        // console.log('fileList',this.fileList);
        let filesArr = [];
        if (this.fileList.length > 0 && this.fileList[0][0]) {
          this.fileList[0].forEach(item => {
            filesArr.push(...item);
          });
        }
        if (this.fileList.length > 0 && this.fileList[1][0]) {
          this.fileList[1].forEach(item => {
            filesArr.push(...item);
          });
        }
        this.$set(this, "activeFiles", filesArr);
        // console.log('activeFiles',this.activeFiles);
        this.isOpenFileManager = true;
        this.fileManagerIndex = index;
        this.fileManagerType = type;
      },
      /*选择图片之前*/
      onBeforeUploadImage(file) {
        return true;
      },
      /*选择上传图片*/
      fileChange(e) {
        console.log(e);
      },
      /*封面上传图片*/
      coverUploadImage(param) {
        let self = this;
        const loading = this.$loading({
          lock: true,
          text: "图片上传中,请等待",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        const formData = new FormData();
        formData.append("iFile", param.file);
        formData.append("group_id", self.activeType);
        formData.append("file_type", self.this_config.file_type);
        FileApi.uploadFile(formData)
          .then(res => {
            self.form.video_cover = res.data;
            loading.close();
            self.getData();
            param.onSuccess(); // 上传成功的图片会显示绿色的对勾
            // 但是我们上传成功了图片， fileList 里面的值却没有改变，还好有on-change指令可以使用
          })
          .catch(res => {
            loading.close();
          });
      },
      // http://benbenzhifu.rchz.top/index.php/shop/file.upload/image
      // console.log(FileApi,'查看数据');
      onSubmitget() {
  
        // type === 1 高级模板 type === 2 普通模板
        if (this.form.type === 1) {
          // 组合图片和文字数据
          this.imgVideoListArr.forEach((item, index) => {
            item.urlList = this.fileList[0][index];
          });
          this.form.detail = this.imgVideoListArr;
        } else if (this.form.type === 3) {
          // 清洗图片数据
          // this.fileList[0].forEach((item, index) => {
          //   this.video_tem_params.mediaList["Media" + index] = this.fileList[0][index][0].file_path;
          // });
          this.fileList[0].forEach((item, index) => {
            item.forEach((item1, index1) => {
              this.video_tem_params.mediaList["Media" + index].push(
                item1.file_path
              );
            });
          });
  
          this.fileList[1].forEach((item, index) => {
            item.forEach((item1, index1) => {
  
              if (this.video_tem_params.audioList.audio) {
                this.video_tem_params.audioList.audio.push(item1.file_path);
              } else {
                this.video_tem_params.audioList["audio" + index].push(
                  item1.file_path
                );
              }
              // this.video_tem_params.audioList["audio" + index].push(item1.file_path);
            });
          });
  
          // this.fileList[1].forEach((item, index) => {
          //   item.forEach((item1, index1) => {
          //     this.video_tem_params.audioList["audio" + index].push(item1.file_path);
          //   })
          // });
          let obj = {};
  
          // // 数据扁平化
          for (const objKey in this.video_tem_params.mediaList) {
            obj[objKey] = this.video_tem_params.mediaList[objKey];
          }
          for (const objKey in this.video_tem_params.textList) {
            obj[objKey] = this.video_tem_params.textList[objKey];
          }
          for (const objKey in this.video_tem_params.audioList) {
            obj[objKey] = this.video_tem_params.audioList[objKey];
          }
          this.form.detail = obj;
        }
  
  
  
        this.$refs.form.validate(valid => {
          if (valid) {
  
            FileApi.addAudio(this.form).then(res => {
  
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
  
                this.form = {
                  // 活动ID
                  action_id: "",
                  // 视频名称
                  video_name: "",
                  // 视频封面
                  // video_cover: "",
                  // 高级模板一级分类
                  senior_tmp_temp: "",
                  // 高级模板二级分类
                  senior_tmp: "",
                  type: 1, // 1 普通模板 , 2 高级模板
                  // 高级模板主键 id
                  temid: "",
                  // 高级模板 id
                  tem_ids: "",
                  // 模板效果(0)
                  // tmp_effect:
                  //   "https://ice-public-media.oss-cn-shanghai.aliyuncs.com/ice-document-media/ve_template/IceSys_VETemplate_s102096.mp4",
                  tmp_effect: [],
                  // 合成视频数量
                  max_num: 0,
                  // 图片与配文
                  detail: []
                };
                this.fileText = [];
                this.fileList = [];
                this.video_src='';
              } else {
                this.$message({
                  message: res.msg,
                  type: "warning"
                });
              }
            });
          }
        });
  
      },
  
      onSubmit() {
        // type === 1 高级模板 type === 2 普通模板
  
        if (this.form.type === 1) {
          // 组合图片和文字数据
          this.imgVideoListArr.forEach((item, index) => {
            item.urlList = this.fileList[0][index];
          });
          this.form.detail = this.imgVideoListArr;
        } else if (this.form.type === 2) {
          // 清洗图片数据
          this.fileList[0].forEach((item, index) => {
            this.video_tem_params.mediaList["Media" + index] = this.fileList[0][
              index
            ];
          });
          let obj = {};
          // 数据扁平化
          for (const objKey in this.video_tem_params.mediaList) {
            obj[objKey] = this.video_tem_params.mediaList[objKey];
          }
          for (const objKey in this.video_tem_params.textList) {
            obj[objKey] = this.video_tem_params.textList[objKey];
          }
          this.form.detail = obj;
        }
  
        this.$refs.form.validate(valid => {
          if (valid) {
            FileApi.addmoban(this.form).then(res => {
              console.log("获取视频模板列表", res);
              if (res.code == 1) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                console.log("submit2", res.code);
                this.form = {
                  // 活动ID
                  action_id: "",
                  // 视频名称
                  video_name: "",
                  // 视频封面
                  // video_cover: "",
                  // 高级模板一级分类
                  senior_tmp_temp: "",
                  // 高级模板二级分类
                  senior_tmp: "",
                  type: 1, // 1 普通模板 , 2 高级模板
                  // 高级模板主键 id
                  temid: "",
                  // 高级模板 id
                  tem_ids: "",
                  // 模板效果(0)
                  // tmp_effect:
                  //   "https://ice-public-media.oss-cn-shanghai.aliyuncs.com/ice-document-media/ve_template/IceSys_VETemplate_s102096.mp4",
                  tmp_effect: [],
                  // 合成视频数量
                  max_num: 0,
                  // 图片与配文
                  detail: []
                };
                this.fileText = [];
                this.fileList = [];
                this.video_src='';
              }
            });
          }
        });
        console.log("submit!");
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${
            files.length
          } 个文件，共选择了 ${files.length + fileList.length} 个文件`
        );
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      }
    }
  };
  </script>
  
  <style scoped lang="scss">
  .lin ::v-deep .el-form-item--small .el-form-item__content {
    display: flex !important;
  }
  
  .som ::v-deep .el-form-item__content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  .xian {
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0 20px;
    background-color: #dcdfe6;
  }
  
  .upload-demo {
    display: inline-block;
  }
  
  .img-video-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  
    li {
      width: 100px;
      height: 100px;
      border-radius: 8px;
      margin: 10px;
      border: 1px dashed #ccc;
      overflow: hidden;
      padding: 5px;
      box-sizing: border-box;
      position: relative;
  
      img {
        width: 100%;
        height: 100%;
      }
  
      .img-video-list-item-default {
        position: relative;
        img {
          width: 88px;
          height: 88px;
        }
        div {
          position: absolute;
          bottom: 1px;
          left: 50%;
          text-align: center;
          width: 100%;
          line-height: 25px;
          height: 25px;
          background-color: rgba(0, 0, 0, 0.5);
          color: #fff;
          transform: translateX(-50%);
          font-size: 18px;
        }
        p {
          position: absolute;
          bottom: 1px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 18px;
        }
      }
  
      &:hover {
        .img-video-list-item-delete {
          display: flex;
        }
      }
    }
  }
  .video-item {
    position: relative;
  
    &:hover {
      .img-video-list-item-delete {
        display: flex;
      }
    }
  }
  .img-video-list-item-delete {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
  
    i {
      display: inline-block;
      width: 20px;
      height: 20px;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
    }
  }
  </style>
  